<template>
	<!-- 添加弹框 -->
		<el-dialog  width="55%" title=""   visible :show-close="false" :modal-append-to-body="false" class="wrap" @close="cancel" :close-on-click-modal="false">
		<i class="el-icon-close close" @click="cancel" style="color: white;"></i>
	    <div class="bt">学生资料详情</div>
		<el-form label-width="100px" :inline="true" class="form">
			<div class="xx">
					<div class="mc">
						<h1>{{this.form.zwm}}</h1>
						<p>{{this.form.age}}岁</p>
					</div>
					<div class="bq">
						<el-tag type="success" class="list1"   v-for="(v,index) in bqList">
							{{v}}
						<i class="el-icon-close del1" @click = "delbq(v)"></i>
						</el-tag>
					  <el-button type="" size="small" @click="componentsShow('bq')">+标签</el-button>
					</div>
			</div>
			<div class="jh">
				<div class="fz">
					<el-tabs  v-model="tabPosition" @tab-click="handleClick" class="left">
					 <el-tab-pane label="线上互动" name='1'></el-tab-pane>
					 <el-tab-pane label="预约" name='2'></el-tab-pane>
					 <el-tab-pane label="试听跟踪" name='3'></el-tab-pane>
					 <el-tab-pane label="报名跟踪" name='4'></el-tab-pane>
					 <el-tab-pane label="完成" name='5'></el-tab-pane>
				 </el-tabs>
				 <span style="margin-left: 65px;" class="el-icon-question"></span>
				 <span   class="el-icon-circle-plus"></span>
			 </div>
			 <ul class="list">
			 	 <li v-for = "v in this.jhlist">
					 <img v-if="v.iszx == '完成'" src="../../../assets/img/wc.png">
					 <div class="d1">
					 		<p>{{v.type}}计划</p>
					 </div>
					 <div class="d2">
					 		<p>{{v.mc}}</p>
					 		<p>plan：{{v.yjsj}}</p>
					 </div>
					 <div class="d3">
						 <el-button size="small" v-if="v.iszx == '未完成'" type="text"  @click="bjwc(v.gtjhid)">标记完成</el-button>
						 <el-button size="small" type="text"  @click="componentsShow('edit',v.gtjhid)">详情</el-button>
					 </div>
				 </li>
			 </ul>
			</div>
			<el-button type="primary" class="submit" @click="submit">保存</el-button>
			<BqComponent v-if="portComponents.bq.toggle" @close="componentsHide" :params="portComponents.bq.params"></BqComponent>
			<EditComponent v-if="portComponents.edit.toggle" @close="componentsHide" :params="portComponents.edit.params"></EditComponent>

		</el-form>
		<!-- </el-dialog> -->
	</el-dialog>
</template>
<script type="text/javascript">
import EditComponent from './edit'
import BqComponent from '../../admin/xxjbszManage/bq'
	import qs from 'qs'
	export default {
		props: ['params'],
		components: {BqComponent ,EditComponent},
		data() {
			return {
				tabPosition:'1',
				bqList:[],
				jhlist:[],
				form:{

				},
				portComponents: {
					bq: {
						type: 'bq',
						toggle: false,
						params: '',
						data: {}
					},
					edit: {
							type: 'edit',
							toggle: false,
							params: '',
							data: {}
					},
				}
			}
		},
		created() {
			console.log(this.params.row.id)
			this.loadinfo()
		},
		methods: {
			handleClick(tab, event){
				this.loadinfo()
			},
			bjwc(id){
				this.$confirm('此操作将预设班级转为正式班级, 是否继续?', '提示', {
				 confirmButtonText: '确定',
				 cancelButtonText: '取消',
				 type: 'warning'
			 }).then(() => {
				 var params3 = qs.stringify({
							 gtjhid:id
						});
				 this.axios.post(this.$store.state.api+'gtjh/updatewc',params3)
				 .then( res =>  {
					 		this.loadinfo()
					 }).catch(res => {
						 	this.$message.warning("服务器异常");
							this.$emit('close', { type: 'info', cancel: true });
					 })
			 }).catch(() => {
				 this.$message({
					 type: 'info',
					 message: '已取消'
				 });
			 });

			},
			loadinfo(){
 				 var logininfo = JSON.parse(localStorage.logininfo) ;
         var params3 = qs.stringify({
               xxid:logininfo.xxid,
               yhid:logininfo.id,
               xsid:this.params.row.id,
							 jd:this.tabPosition
						});
 				 this.axios.post(this.$store.state.api+'xsly/info',params3)
         .then( res =>  {
					 console.log(res,'123r32')
 							this.form=res.data.data;
							this.jhlist = res.data.data.gtjh
 							try{
 							this.bqList = this.form.bq.split(',');
 							}catch(e){}
 					 }).catch(res => {
 						 this.$message.warning("服务器异常");
 			 				this.$emit('close', { type: 'info', cancel: true });
 					 })
 			},
			delbq(bq){
				var dd =[];
					for ( let i in this.bqList ) {
						if (this.bqList[i]==bq){
							continue}else{
							 dd.push(this.bqList[i]);
						}
					}
					this.bqList= dd;
						 },

			submit() {
				this.$store.state.loading = true;
				var logininfo = JSON.parse(localStorage.logininfo);
				var params3 = qs.stringify({
					bjmc:this.vmc,
					yjkbrq:time1,
					jsid:this.vjsid,
					sjdid:hstr,
					bjid:this.$route.query.iid,
					day:this.vday,
					yhid: logininfo.id,
					xxid: logininfo.xxid,

				});
				//执行
				this.axios.post(this.$store.state.api + 'xsly/update', params3)
					.then(res => {
						if(res.data.code == 1) {
							this.$emit('close', { type: 'info', cancel: false });
							this.$store.state.loading = false;
						} else {
							this.$emit('close', { type: 'info', cancel: false });
							this.$store.state.loading = false;
						}
					}).catch(res => {
						this.$message.warning("服务器繁忙，请重试");
						//this.$emit('close', { type: 'add', cancel: false });
						this.$store.state.loading = false;
					})
			},




			cancel() {
				this.$emit('close', { type: 'info', cancel: true })
			},
			componentsShow (type,data) { //显示组件
								console.log(type,data)
								for ( let i in this.portComponents ) {
										if (type == this.portComponents[i].type) {
												this.portComponents[i].toggle = true;
												this.portComponents[i].params = data;
												if (this.portComponents[i].data.type == 'single') {
														this.portComponents[i].data.index = data.row.id
												}else if(this.portComponents[i].data.type == 'multiple'){
														this.portComponents[i].data.index = this.multipleDelNum;
												}else{
														return;
												}
												return;
										}
								}
						},
						componentsHide (setting) { //关闭组件

								for ( let i in this.portComponents ) {
										if (setting.type == this.portComponents[i].type) {
											 this.portComponents[i].toggle = false;
											 if (this.portComponents[i].type=='bq'){
													if (!setting.cancel) {
														 for ( let b in setting.clist ) {

													 this.bqList.push( setting.clist[b]);
													}

													}
											 }else{
												if (!setting.cancel) {
													this.loadinfo()
												}
											 }
											 return;
										}
								}
						}
		}
	}
</script>
<style lang="less" scoped >
	.wrap {

		.bt{
			position: absolute;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			top: 0;
			left: 0;
			// margin-top: -70px;
			background: #50BFFF;
			// margin-left: -20px;
			// margin-bottom: 20px;
			color:white;
			text-align:left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
		.close{
				z-index: 10;
				position: absolute;
		}


		.submit {
			width: 120px;
			display: block;
			// float: left;
			margin: 0 auto;
			margin-top: 20px;
		}


		.form {
			text-align: left;
			margin-top: 20px;
			.xx{
				width: 100%;
				height: 100px;
				// border: 1px solid #000;
				overflow: hidden;
				.mc{
					width: 20%;
					height: 100px;
					// border: 1px solid #000;
					padding-left: 10px;
					float: left;
				}
				.bq{
					width: 80%;
					height: 100px;
					padding-top: 15px;
					// border: 1px solid #000;
					float: left;
				}
			}
			.jh{
				.fz{
					margin-top: 20px;
					overflow: hidden;
					.left{
						width: 75%;
						float: left;
					}
					.right{
						float: left;
						margin-left: 20px;
					}
					span{

						font-size: 25px;
						width: 40px;
						height: 40px;
						// border: 1px solid #DFE4ED;
						// border-radius: 5px;
						cursor:pointer;
						text-align: center;
						line-height: 40px;
					}
				}
				.list{
					width: 100%;
					border: 2px solid #e8e8e8;
					padding-bottom: 20px;
					li{
						position: relative;
						height: 80px;
						width: 90%;
						border: 2px solid #DFE4ED;
						margin: 0 auto;
						margin-top: 20px;
						overflow: hidden;
						img{
							position: absolute;
							right: 0;
						}
						.d1{
							width: 20%;
							height: 100%;
							// border: 1px solid #000;
							float: left;
							p{
								width: 60px;
								height: 60px;
								text-align: center;
								line-height: 20px;
								border: 2px solid #ccc;
								font-size: 20px;
								margin-top: 7px;
								margin-left: 15px;
								padding-top: 7px;
								border-radius: 50%;
							}
						}
						.d2{
							width: 60%;
							height: 100%;
							// border: 1px solid #000;
							float: left;
							p{
								height: 50%;
								line-height: 40px;
							}
						}
						.d3{
							width: 20%;
							height: 100%;
							// border: 1px solid #000;
							float: left;
							text-align: center;
							button{
								margin-top: 35px;
							}
						}
					}
				}
			}
		}


	}

</style>
